<template>
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               background-color="#D3D3D3" text-color="#fff" >
        <el-menu-item index="1"><router-link to='/'>首页</router-link></el-menu-item>
        <el-menu-item index="2">整租</el-menu-item>
        <el-menu-item index="3">合租</el-menu-item>
        <el-menu-item index="4">新闻资讯</el-menu-item>
        <el-menu-item index="4">用户反馈</el-menu-item>
        <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

        <div v-if="userName">
          <!--<div style="cursor: pointer;">{{userName}}</div>
          <el-popconfirm title="确定退出吗" @confirm="logout()">
            <el-button class="login-exit" type="primary" slot="reference">退出</el-button>
          </el-popconfirm>-->
          <el-dropdown>
              <span class="el-dropdown-link" >
                {{userName}}<!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><router-link to='/back'>个人主页面</router-link></el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
         </el-dropdown>
        </div>
        <template v-else>
          <router-link style="" :to="{path:'/Login'}">
            <span>登录</span>
          </router-link>
          <router-link style="" :to="{path:'/Login'}">
            <span>注册</span>
          </router-link>
        </template>
      </el-menu>
    </div>
</template>

<script>
    export default {
      name: "MainHeader",
      data() {
        return {
          activeIndex: '1',
          userName:'你好'
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped>

</style>
